<template>
<div style="border: 1px solid #E8E8E8;height: 586px">
  <el-tree :data="treeData"
           :props="treeProp"
           :default-checked-keys="defaultCheckedKeys"
           ref="deptTree"
           node-key="id"
           empty-text="暂无数据"
           show-checkbox
           class="form-tree"
           @check="nodeChecked"
  ></el-tree>
</div>
</template>

<script>
import {getDeptTreeList} from '../../../../api/customer/role'
const uniq = require('lodash/uniq')
export default {
  name: 'DataAuthorization',
  props: {
    treeList: {
      type: Array,
      default: function () {
        return []
      }
    },
    treeProps: {
      type: Object,
      default: function () {
        return {
          children: 'children',
          label: 'label',
          disabled: !this.isUpdatable
        }
      }
    },
    defaultCheckedIdList: {
      type: Array,
      default: function () {
        return []
      }
    },
    isUpdatable: {
      type: Boolean,
      default: false
    }
  },
  created () {
    this.getDeptTreeListReq()
  },
  data () {
    return {
      treeData: this.treeList,
      treeProp: {
        children: 'children',
        label: 'label',
        disabled: this.disabledFunc
      },
      defaultCheckedKeys: this.defaultCheckedIdList,
      checkedIdList: []
    }
  },
  methods: {
    // 设置是否可修改
    disabledFunc () {
      return !this.isUpdatable
    },
    nodeChecked (data, checkedObj) {
      this.checkedIdList = checkedObj.checkedKeys
    },
    getDeptTreeListReq () {
      getDeptTreeList({}, (data) => { this.treeData = data.deptInfo.children })
    },
    // 外部调用可获取选中的数据id列表
    getSelectedDataIdList () {
      return uniq(this.checkedIdList)
    }
  },
  computed: {

  },
  watch: {
    defaultCheckedIdList: {
      handler: function (val) {
        this.$refs.deptTree.setCheckedKeys(val)
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.form-tree{
  height: 100%;
}
</style>
